<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
    <div style="text-align: left">
        <el-card class="cardclass">
            <el-container>
                <el-header class="headerClass">
                  <ft-return-btn text="返回列表" @click="goBack()"></ft-return-btn>
                </el-header>
                <main>
                    <div>
                        <span class="spanTitleclass">评级参数基本信息</span>
                        <el-button v-if="editShow" style="float: right;" size="small" @click="edit()" plain>编辑</el-button>
                    </div>
                    <div :class="{'editClass':!formDisabled, 'noEditClass':formDisabled}">
                        <div class="divClass">
                            <el-form ref="formRef" size="small" :model="formData" label-width="100px"
                                :inline="true" :label-position="labelPosition" :disabled="formDisabled"
                                style="padding-top: 20px;" :rules="rules">
                                <el-row>
                                    <el-col :md="8" :lg="6">
                                        <el-form-item label="参数名称" prop="quotaName">
                                            <span v-if="formDisabled">{{formData.quotaName}}</span>
                                            <el-input v-else v-model="formData.quotaName" :disabled="formDisabled"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :md="8" :lg="6">
                                        <el-form-item label="指标大类" prop="quotaCategoryLargeId">
                                            <ft-quota-category  v-model="formData.quotaCategoryLargeId"
                                                                :editing="!formDisabled"
                                                                :categoryProp="categoryLarge"
                                                                @change="categoryLargeChange">
                                            </ft-quota-category>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :md="8" :lg="6">
                                        <el-form-item label="指标小类" prop="quotaCategorySubId">
                                            <ft-quota-category  v-model="formData.quotaCategorySubId"
                                                                :editing="!formDisabled"
                                                                :categoryProp="categorySmall"
                                                                :parentIdProp="formData.quotaCategoryLargeId"
                                                                @change="categorySubChange"
                                                                :disabled="categoryDisabled">
                                            </ft-quota-category>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :md="8" :lg="6">
                                        <el-form-item label="性质" prop="quotaProperty">
                                            <ft-enum-select
                                                :editing="!formDisabled"
                                                v-model="formData.quotaProperty"
                                                service-name="lss-customer"
                                                type-name="quotaProperty"
                                                @change="propertyChange">
                                            </ft-enum-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :md="8" :lg="6">
                                        <el-form-item label="标准值" prop="standardValue">
                                            <span v-if="formDisabled">{{formData.standardValue}}</span>
                                            <el-input v-else v-model="formData.standardValue" :disabled="formDisabled"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :md="8" :lg="6">
                                        <el-form-item label="满分" prop="fullMark">
                                            <ft-number-input v-model="formData.fullMark" :editable="!formDisabled" :precision='[3]'></ft-number-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :md="24" :lg="24">
                                        <el-form-item label="说明" prop="remark">
                                            <span v-if="formDisabled">{{formData.remark}}</span>
                                            <el-input v-else type="textarea" v-model="formData.remark" :disabled="formDisabled"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                        <hr v-if="editFlag" class="hrClass">
                    </div>
                    <div v-if="editFlag" class="divBottomClass">
                        <el-row style="padding-right: 36px">
                            <el-col align="right">
                                <el-button size="small" @click="clickCancel" :disabled="cancelDisabled">取消</el-button>
                                <el-button type="primary" size="small" @click="clickSave" :disabled="saveDisabled">保存</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </main>
            </el-container>
        </el-card>
        <el-card>
            <div><span class="spanTitleclass">计分标准</span></div>
            <div>
                <span style="text-align: left; float: left; padding:10px 6px 0 0">
                    <el-button type="primary" icon="joys-icon-refresh" size="small" @click="refresh">刷新</el-button>
                </span>
                <span style="float: left; padding:10px 72px 0 0" >
                    <el-button :disabled="!formDisabled" icon="joys-icon-new" size="small" type="primary" @click="addStandard">新增</el-button>
                </span>
            </div>
            <div>
                <el-table ref="tableRef" :data="formData.scoreStandard" tooltip-effect="light">
                    <el-table-column v-if="formData.quotaProperty=='QUALITATIVE'" min-width="170" align="left" label="计分维度">
                        <template slot-scope="scope">
                            <el-input v-if="singleStandardEditFlag(scope.row)" v-model="scope.row.score_dimension"
                                    placeholder="如：参数名称为治理机制下的“明晰的股权机制”。如没有计分维度，请填写参数名称" maxlength="100"></el-input>
                            <span v-else>{{scope.row.score_dimension}}</span>
                            <li v-for="(item, index) in scope.row.score_info" :key="index">
                                <el-button v-if="index>0" type="text" readonly>&emsp;</el-button>
                            </li>
                        </template>
                    </el-table-column>
                    <el-table-column v-else min-width="170" align="left" label="计分维度">
                        <template slot-scope="scope">
                            <ft-quota-category  v-if="!scope.row.score_dimension_id"
                                                v-model="scope.row.score_dimension"
                                                :editing="!scope.row.score_dimension_id"
                                                :categoryProp="categorySmall"
                                                :parentIdProp="formData.quotaCategorySubId"
                                                @change="scoreDimensionChange($event, scope)">
                            </ft-quota-category>
                            <span v-else>{{scope.row.score_dimension_name}}</span>
                            <li v-for="(item, index) in scope.row.score_info" :key="index">
                                <el-button v-if="index>0" type="text" readonly>&emsp;</el-button>
                            </li>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="100" align="left" label="计分结果">
                        <template slot-scope="scope">
                            <li v-for="(item, index) in scope.row.score_info" :key="index">
                                <el-input v-if="item.editFlag && formData.quotaProperty=='QUALITATIVE'"
                                          v-model="item.scoreResult" placeholder="请填写计分结果，如：“较好”"
                                          maxlength="100">
                                </el-input>
                                <el-tooltip v-else class="tooltip-class" effect="light" :content="item.scoreResult" placement="top">
                                    <span>{{item.scoreResult}}</span>
                                </el-tooltip>
                                <el-button v-if="!item.scoreResult && formData.quotaProperty=='QUANTITATIVE'" type="text" readonly>&emsp;</el-button>
                            </li>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="30" align="left" label="得分">
                        <template slot-scope="scope">
                            <li v-for="(item, index) in scope.row.score_info" :key="index">
                                <ft-number-input v-model="item.score"
                                                :editable="item.editFlag && formData.quotaProperty=='QUALITATIVE' ? true : false"
                                                :precision='[3]'>
                                </ft-number-input>
                                <el-button v-if="!item.score && formData.quotaProperty=='QUANTITATIVE'" type="text" readonly>&emsp;</el-button>
                            </li>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="formData.quotaProperty=='QUALITATIVE'" min-width="110" align="center" label="功能操作">
                        <template slot-scope="scope">
                            <li v-for="(item, index) in scope.row.score_info" :key="index">
                                <el-button v-if="index==0" :disabled="!formDisabled || singleStandardEditFlag(scope.row)" type="text" size="small" style="padding-right: 0" @click="addResult(scope.row.score_info)">添加计分结果</el-button>
                                <el-button v-else type="text" readonly>&emsp;&emsp;&emsp;&emsp;</el-button>
                                <el-button v-if="!item.editFlag" :disabled="!formDisabled" type="text" size="small" style="padding: 8px 0" @click="editResult(item)">编辑&nbsp;</el-button>
                                <el-button v-if="item.editFlag" type="text" size="mini" style="padding: 8px 0" @click="saveResult(scope, index)">保存&nbsp;</el-button>
                                <span>|</span>
                                <el-popover
                                    v-if="!item.editFlag"
                                    :disabled="!formDisabled"
                                    placement="top"
                                    width="193"
                                    v-model="item.delVisible">
                                    <p style="text-align: center; font-size: 12px;">数据删除后，将不能恢复，确定删除吗？</p>
                                    <div style="text-align: center; margin: 0">
                                        <el-button size="mini" @click="item.delVisible = false">取消</el-button>
                                        <el-button type="danger" size="mini" @click="deleteResult(scope, index)">确定</el-button>
                                    </div>
                                    <el-button slot="reference" type="text" size="small" style="color: #B94A48;padding: 8px 0">&nbsp;删除</el-button>
                                </el-popover>
                                <el-button v-if="item.editFlag" type="text" size="mini" style="padding: 8px 0" @click="cancelResult(item, scope, index)">&nbsp;取消</el-button>
                            </li>
                        </template>
                    </el-table-column>
                    <el-table-column v-else min-width="110" align="center" label="功能操作">
                        <template slot-scope="scope">
                            <el-button v-if="!scope.row.score_dimension_id" type="text" size="mini" style="padding: 8px 0" @click="saveResultDL(scope)">保存&nbsp;</el-button>
                            <span v-if="!scope.row.score_dimension_id">|</span>
                            <el-button v-if="!scope.row.score_dimension_id" type="text" size="mini" style="padding: 8px 0" @click="cancelResult(null, scope.row, scope.$index)">&nbsp;取消</el-button>
                            <el-popover
                                v-if="scope.row.score_dimension_id"
                                :disabled="!formDisabled"
                                placement="top"
                                width="193"
                                v-model="scope.row.delVisible">
                                <p style="text-align: center; font-size: 12px;">数据删除后，将不能恢复，确定删除吗？</p>
                                <div style="text-align: center; margin: 0">
                                    <el-button size="mini" @click="scope.row.delVisible = false">取消</el-button>
                                    <el-button type="danger" size="mini" @click="deleteResult(scope.row, scope.$index)">确定</el-button>
                                </div>
                                <el-button slot="reference" type="text" size="small" style="color: #B94A48;padding: 8px 0">&nbsp;删除</el-button>
                            </el-popover>
                            <li v-for="(item, index) in scope.row.score_info" :key="index">
                                <el-button v-if="index>0" type="text" readonly>&emsp;</el-button>
                            </li>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script>
import FtQuotaCategory from "../../ft/FtQuotaCategory.vue";
export default {
    components: {FtQuotaCategory},
    props: {
        propsData: {
            type: Object,
            default: null
        },
        isFormDisabled: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            //编辑显示控制
            editShow: false,
            //按钮显示控制
            editFlag: false,
            //表单控制
            labelPosition: 'right',
            //不可编辑
            formDisabled: true,
            //保存按钮控制
            saveDisabled: true,
            //取消按钮控制
            cancelDisabled: true,
            //表单数据（用于取消数据回退）
            rollBackFormData: {},
            //指标小类禁用状态
            categoryDisabled: true,
            //指标分类标识：指标大类
            categoryLarge: 'LARGE',
            //指标分类标识：指标小类
            categorySmall: 'SMALL',
            //整型标识：正整数
            positive: 'POSITIVE',
            //整型标识：负整数
            negative: 'NEGATIVE',
            //表单数据
            formData: {},
            //计分维度
            scoreDimension: {
                score_dimension_id: '',
                score_dimension: '',
                score_info: [
                    {
                        scoreId: '',
                        scoreResult: '',
                        score: 0,
                        editFlag: true
                    }
                ]
            },
            //计分
            scoreInfo: {
                scoreId: '',
                scoreResult: '',
                score: 0,
                editFlag: true
            },
            //基本信息校验规则
            rules: {
                quotaName: [
                    {
                        required: true, //是否必填
                        message: '参数名称不能为空', //规则
                        trigger: 'blur'  //何事件触发
                    },
                    {
                        max: 100,
                        message: '参数名称过长', //规则
                    }
                ],
                quotaCategoryLargeId: [
                    {
                        required: true, //是否必填
                        message: '指标大类不能为空', //规则
                        trigger: 'blur'  //何事件触发
                    },
                ],
                quotaCategorySubId: [
                    {
                        required: true, //是否必填
                        message: '指标小类不能为空', //规则
                        trigger: 'blur'  //何事件触发
                    }
                ],
                quotaProperty: [
                    {
                        required: true, //是否必填
                        message: '性质不能为空', //规则
                        trigger: 'blur'  //何事件触发
                    }
                ],
                fullMark: [
                    {
                        required: true, //是否必填
                        message: '满分不能为空', //规则
                        trigger: 'blur'  //何事件触发
                    }
                ],
                remark: [
                    {
                        max: 100,
                        message: '说明内容过长', //规则
                    }
                ],
                standardValue: [
                    {
                        max: 100,
                        message: '标准值内容过长', //规则
                    }
                ],
            },
        }
    },
    mounted(){
        this.formData=JSON.parse(JSON.stringify(this.propsData))
        this.rollBackFormData=JSON.parse(JSON.stringify(this.propsData))
        this.editShow=this.isFormDisabled
        this.formDisabled=this.isFormDisabled
        this.editFlag=!this.isFormDisabled
        this.saveDisabled=this.isFormDisabled
        this.cancelDisabled=this.isFormDisabled
    },
    methods: {
        //返回列表
        goBack(){
            this.$emit("returnList")
        },
        //计分维度刷新
        refresh(){
            let url = "/joys-rest/lss-customer/indication/"
            this.$http.get(url+this.formData.indicationId).then(
                resp => {
                    this.rollBackFormData=JSON.parse(JSON.stringify(resp.body))
                    this.formData = resp.body
                    this.formDisabled=true
                    this.saveDisabled=true
                    this.cancelDisabled=true
                    this.editFlag=false
                    this.editShow=true
                    this.$message.success("数据已刷新！")
                },
                resp => {
                    this.$message.error("刷新数据失败！")
                }
            )
        },
        //指标大类change事件
        categoryLargeChange(params){
            if(params.itemId){
                this.formData.quotaCategoryLargeId = params.itemId
                this.$refs.formRef.validateField("quotaCategoryLargeId")
            }
            this.categoryDisabled = false
            if(!this.formData.quotaCategoryLargeId){
                this.categoryDisabled = true
            }
            this.$set(this.formData, 'quotaCategorySubId', null)
        },
        //指标小类change事件
        categorySubChange(params){
            if(params.itemId){
                this.formData.quotaCategorySubId = params.itemId
                this.$refs.formRef.validateField("quotaCategorySubId")
            }
        },
        //定量指标计分维度change事件
        scoreDimensionChange(e, scope){
            if(e.itemId){
                scope.row.score_dimension = e.itemId
                scope.row.score_dimension_code = e.itemCode
                scope.row.score_dimension_name = e.itemName
                scope.row.score_info = e.scoreList
            }
        },
        //性质change事件
        propertyChange(val){
            this.formData.quotaProperty = val
            this.$refs.formRef.validateField("quotaProperty")
        },
        //新增计分维度
        addStandard(){
            this.formData.scoreStandard.push(JSON.parse(JSON.stringify(this.scoreDimension)))
        },
        //单条计分标准编辑状态
        singleStandardEditFlag(row){
            var editFlag = false
            var result = row.score_info.find((obj) => obj.editFlag == true)
            if(result){
                editFlag = true
            }
            return editFlag
        },
        //计分标准编辑状态
        allStandardEditFlag(){
            var editFlag = false
            var array = this.formData.scoreStandard
            //存在计分标准且存在编辑状态的打分项
            if(array && array.length > 0){
                for (let i in array) {
                    if(this.singleStandardEditFlag(array[i])){
                        editFlag = true
                        break
                    }
                }
            }
            return editFlag
        },
        //编辑
        edit(){
            if(this.allStandardEditFlag()){
                this.$message.warning("有未保存的计分标准，请优先处理！")
            }else{
                this.editShow=false
                this.editFlag=true
                this.formDisabled=false
                this.saveDisabled=false
                this.cancelDisabled=false
                this.rollBackFormData=JSON.parse(JSON.stringify(this.formData))
                //指标小类编辑控制
                this.categoryDisabled = false
                if(!this.formData.quotaCategoryLargeId){
                    this.categoryDisabled = true
                    this.formData.quotaCategorySubId = null
                }
            }

        },
        //基本信息保存
        clickSave(){
            this.$refs.formRef.validate((valid) => {
                if (valid) {
                    let url = "/joys-rest/lss-customer/indication/save"
                    this.$http.put(url, this.formData).then(
                        resp => {
                            this.formData = resp.body
                            this.formDisabled=true
                            this.saveDisabled=true
                            this.cancelDisabled=true
                            this.editFlag=false
                            this.editShow=true
                            this.$message.success("保存成功！")
                            this.rollBackFormData=JSON.parse(JSON.stringify(resp.body))
                        },
                        resp => {
                            this.$message.error("保存失败！")
                        }
                    )
                }
            })
        },
        //取消
        clickCancel(){
            if(this.formData.indicationId){
                this.formData=JSON.parse(JSON.stringify(this.rollBackFormData))
                this.editFlag=false
                this.editShow=true
                this.formDisabled=true
                this.saveDisabled=true
                this.cancelDisabled=true
            }else{
                this.$emit("returnList")
            }
        },
        //添加计分结果
        addResult(score_info){
            score_info.push(JSON.parse(JSON.stringify(this.scoreInfo)))
        },
        //计分结果编辑
        editResult(item){
            this.$set(item, 'editFlag', true)
        },
        //计分结果保存（定性指标）
        saveResult(scope, index){
            if(!scope.row.score_dimension){
                this.$message.error("计分维度不能为空！")
            }else if(!scope.row.score_info[index].scoreResult){
                this.$message.error("计分结果不能为空！")
            }else if(scope.row.score_info[index].score === undefined
                    || scope.row.score_info[index].score === null){
                this.$message.error("得分不能为空！")
            }else{
                //本次保存数据
                var saveFormData = JSON.parse(JSON.stringify(this.rollBackFormData))
                //新增计分项
                if(!scope.row.score_info[index].scoreId){
                    //新增计分项隶属新增计分维度
                    if(!saveFormData.scoreStandard[scope.$index]){
                        saveFormData.scoreStandard.push(JSON.parse(JSON.stringify(scope.row)))
                    }else{
                        saveFormData.scoreStandard[scope.$index].score_info.push(JSON.parse(JSON.stringify(scope.row.score_info[index])))
                    }
                }
                saveFormData.scoreStandard[scope.$index].score_dimension = scope.row.score_dimension
                saveFormData.scoreStandard[scope.$index].score_info[index].scoreResult = scope.row.score_info[index].scoreResult
                saveFormData.scoreStandard[scope.$index].score_info[index].score = scope.row.score_info[index].score
                var url = "/joys-rest/lss-customer/indication/save"
                this.$http.put(url, saveFormData).then(
                    resp => {
                        this.rollBackFormData=JSON.parse(JSON.stringify(resp.body))
                        scope.row.score_info[index].editFlag = false
                        this.formData = resp.body
                        this.$message.success("保存成功！")
                    },
                    resp => {
                        this.$message.error("保存失败！")
                    }
                )
            }
        },
        //计分结果保存（定量指标）
        saveResultDL(scope){
            if(!scope.row.score_dimension){
                this.$message.error("计分维度不能为空！")
            }else{
                //本次保存数据
                var saveFormData = JSON.parse(JSON.stringify(this.rollBackFormData))
                saveFormData.scoreStandard[scope.$index] = scope.row
                var url = "/joys-rest/lss-customer/indication/save"
                this.$http.put(url, saveFormData).then(
                    resp => {
                        this.rollBackFormData=JSON.parse(JSON.stringify(resp.body))
                        this.formData = resp.body
                        this.$message.success("保存成功！")
                    },
                    resp => {
                        this.$message.error("保存失败！")
                    }
                )
            }
        },
        //计分结果删除
        deleteResult(scope, index){
            //定量指标删除计分维度
            if(this.formData.quotaProperty=='QUANTITATIVE'){
                this.formData.scoreStandard.splice(index, 1)
            }else{
                //定性指标
                if(this.isLast(scope)){
                    //最后一个打分项直接删除计分维度
                    this.formData.scoreStandard.splice(scope.$index, 1)
                }else{
                    scope.row.score_info.splice(index, 1)
                }
            }
            //保存删除结果
            var url = "/joys-rest/lss-customer/indication/save"
            this.$http.put(url, this.formData).then(
                resp => {
                    this.rollBackFormData=JSON.parse(JSON.stringify(resp.body))
                    resp.body.scoreStandard = this.formData.scoreStandard
                    this.formData = resp.body
                    this.$message.success("删除成功！")
                },
                resp => {
                    this.$message.error("删除失败！")
                }
            )
        },
        //计分结果取消
        cancelResult(item, scope, index){
            //定量指标取消计分维度（直接删除计分维度）
            if(this.formData.quotaProperty=='QUANTITATIVE'){
                this.formData.scoreStandard.splice(index, 1)
            }else{
                //定性指标
                if(item.scoreId && item.scoreId != ''){
                    var tempScore = JSON.parse(JSON.stringify(this.rollBackFormData.scoreStandard[scope.$index].score_info[index]))
                    item.scoreResult = tempScore.scoreResult
                    item.score = tempScore.score
                    item.editFlag = false
                    //最后一个打分项取消需取消计分维度
                    if(this.isLastCancel(scope, item)){
                        var tempStandard = JSON.parse(JSON.stringify(this.rollBackFormData.scoreStandard[scope.$index]))
                        scope.score_dimension = tempStandard.score_dimension
                    }
                }else{
                    //最后一个打分项且未保存的直接取消计分标准
                    if(this.isLast(scope)){
                        this.formData.scoreStandard.splice(scope.$index, 1)
                    }else{
                        scope.row.score_info.splice(index, 1)
                    }
                }
            }
        },
        //判断是否为最后一个取消的打分项
        isLastCancel(scope, item){
            var flag = true
            if(scope.row.score_info.length > 1){
                var scoreArr = scope.row.score_info
                for (let i in scoreArr) {
                    if(scoreArr[i].scoreId != item.scoreId && scoreArr[i].editFlag===true){
                        flag = false
                    }
                }
            }
            return flag
        },
        //判断是否为最后一个打分项
        isLast(scope){
            if(scope.row.score_info.length===1){
                return true
            }else{
                return false
            }
        },
        //数据校验只能输入整数
        proving(obj, integerFlag){
            if(this.positive===integerFlag){
                obj.fullMark = obj.fullMark.replace(/[^\.\d]/g,'').replace('.','')
            }else{
                //去除-0
                if(obj.score==0){
                    obj.score=0
                }else{
                    //处理负数
                    if(obj.score.indexOf('-')==0){
                        obj.score = '-' + obj.score.replace(/[^\.\d]/g,'').replace('.','')
                    }else{
                        obj.score = obj.score.replace(/[^\.\d]/g,'').replace('.','')
                    }
                    //去除字符串前面的0
                    obj.score = obj.score.replace(/\b(0+)/gi,"")
                }
            }
        },
    }
}
</script>
<style scoped>
.noEditClass {
    background-color: none;
    padding: 0 0 20px;
}
.editClass {
    background-color: #F4F8F9;
    padding: 0 0 20px;
}
.divClass {
    padding: 0;
}
.divBottomClass {
    background-color: #F4F8F9;
    padding: 0 0 20px;
}
.hrClass {
    margin-top: 24px;
    border-width: thin;
    border: 0.5px solid rgba(179,179,179,0.20);
}
.divClass >>> span {
    font-family: "PingFangSC-Regular";
    font-size: 14px;
    color: #5C5C5C;
    letter-spacing: 0;
    line-height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space:nowrap;
    display:block;
}
.spanTitleclass {
    font-family: "PingFangSC-Regular";
    font-size: 14px;
    color: #747778;
    letter-spacing: 0;
    line-height: 36px;
}
.cardclass {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
    border: none;
}
.cardclass >>> .el-card__body {
    padding: 20px 20px 0;
}
.headerClass {
    text-align: left;
    font-size: 12px;
    height: 60px;
    background-color: #f0f8ff00 !important;
    padding: 20px
}
li {
    list-style-type:none;
    line-height: 40px;
}
td {
    vertical-align:top;
}
.el-col-lg-6 {
    height: 55px;
    overflow: hidden;
}
.el-table_6 {
    height: 386px;
    overflow: hidden;
}
.tooltip-class {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space:nowrap;
    display:block;
}
</style>
